import React, { Component } from 'react'

import { Form, Input, Select, Button, Row, Col, DatePicker } from 'antd'
const FormItem = Form.Item
const { Option } = Select
const TopForm = ({ form: { getFieldDecorator, getFieldsValue }, onSearch, onClick, advanced, resetForm, groupList, seatList }) => {
    const onHandleAdvanced = () => {
        if (onClick) {
            onClick()
        }
    }
    const formItemLayout = {
        // 抽屉里面Form。二列的布局比例
        labelCol: {
            span: 6
        },
        wrapperCol: {
            span: 16
        }
    };
    return (
        <div>
            <Form>
                <Row gutter={24}>
                    <Col span={5}>
                        <FormItem label='批号'{...formItemLayout}>
                            {
                                getFieldDecorator('batchNo', {
                                    getValueFromEvent: (event) => {
                                        return event.target.value.replace(/\s+/g, "")
                                    },
                                })(
                                    <Input placeholder='请输入批号' allowClear onPressEnter={() => onSearch(getFieldsValue())}></Input>
                                )
                            }
                        </FormItem>
                    </Col>
                    <Col span={5}>
                        <FormItem label='装配班组'{...formItemLayout}>
                            {
                                getFieldDecorator('assemblyGroup', {
                                    // getValueFromEvent: (event) => {
                                    //     return event.target.value.replace(/\s+/g, "")
                                    // },
                                })(
                                    // <Input placeholder='请输入装配班组' allowClear onPressEnter={() => onSearch(getFieldsValue())}></Input>
                                    <Select allowClear placeholder='请选择装配班组'
                                        optionFilterProp="children"
                                        showSearch
                                        filterOption={(input, option) =>
                                            option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        }>
                                        {
                                            groupList && groupList.map((value, index) =>
                                                <Option key={value.groupCode}>{value.groupName}</Option>
                                            )
                                        }
                                    </Select>
                                )
                            }
                        </FormItem>
                    </Col>
                    <Col span={5}>
                        <FormItem label='装配部门'{...formItemLayout}>
                            {
                                getFieldDecorator('department', {
                                    getValueFromEvent: (event) => {
                                        return event.target.value.replace(/\s+/g, "")
                                    },
                                })(
                                    <Input placeholder='请输入装配部门' allowClear onPressEnter={() => onSearch(getFieldsValue())}></Input>
                                )
                            }
                        </FormItem>
                    </Col>
                    <Col span={5}>
                        <FormItem label='机型'{...formItemLayout}>
                            {
                                getFieldDecorator('model', {
                                    getValueFromEvent: (event) => {
                                        return event.target.value.replace(/\s+/g, "")
                                    },
                                })(
                                    <Input allowClear placeholder='请输入机型' onPressEnter={() => onSearch(getFieldsValue())} />
                                )
                            }
                        </FormItem>
                    </Col>
                    <Col span={4} style={{ display: 'flex' }} className="serarch-btns">
                        <FormItem>
                            <Button type="primary" icon="search" onClick={() => onSearch(getFieldsValue())}>
                                {'查询'}
                            </Button>
                        </FormItem>
                        <FormItem>
                            <Button type='primary' icon={advanced ? 'up' : 'down'} onClick={() => onHandleAdvanced()}>
                                {' 展开'}
                            </Button>
                        </FormItem>
                        <FormItem>
                            <Button type="default" onClick={() => {
                                resetForm()
                            }}
                                icon={'redo'}
                            >
                                {'重置'}
                            </Button>
                        </FormItem>
                    </Col>

                </Row>
                <Row gutter={24}>
                    {
                        advanced ? <Col span={5}>
                            <FormItem label='发布状态'{...formItemLayout}>
                                {
                                    getFieldDecorator('isRelease', {
                                        // initialValue: '1'
                                    })(
                                        <Select allowClear={true} placeholder="请选择发布状态">
                                            <Option value='0'>待发布</Option>
                                            <Option value='1'>已发布</Option>
                                        </Select>
                                    )
                                }
                            </FormItem>
                        </Col> : ''
                    }
                    {
                        advanced ? <Col span={5}>
                            <FormItem label='机位'{...formItemLayout}>
                                {
                                    getFieldDecorator('seat', {
                                        // getValueFromEvent: (event) => {
                                        //     return event.target.value.replace(/\s+/g, "")
                                        // },
                                    })(
                                        // <Input placeholder='请输入机位' allowClear onPressEnter={() => onSearch(getFieldsValue())}></Input>
                                        <Select allowClear placeholder='请选择机位'
                                            optionFilterProp="children"
                                            showSearch
                                            filterOption={(input, option) =>
                                                option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }>
                                            {
                                                seatList && seatList.map((value, index) =>
                                                    <Option key={value.code}>{value.seatList}</Option>
                                                )
                                            }
                                        </Select>
                                    )
                                }
                            </FormItem>
                        </Col> : ''
                    }
                    {
                        advanced ? <Col span={5}>
                            <FormItem label='需求时间'{...formItemLayout}>
                                {
                                    getFieldDecorator('requestTime', {
                                    })(
                                        <DatePicker placeholder='请选择需求时间' allowClear style={{ width: '100%' }} />
                                    )
                                }
                            </FormItem>
                        </Col> : ''
                    }
                    {
                        advanced ? <Col span={5}>
                            <FormItem label='导入时间'{...formItemLayout}>
                                {
                                    getFieldDecorator('importTime', {
                                    })(
                                        <DatePicker placeholder='请选择导入时间' allowClear style={{ width: '100%' }} />
                                    )
                                }
                            </FormItem>
                        </Col> : ''
                    }
                </Row>
            </Form>
        </div>
    )
}
export default Form.create()(TopForm);
